<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>02-created应用-新闻列表</title>
    <style>
        * {
          margin: 0;
          padding: 0;
          list-style: none;
        }
        .news {
          display: flex;
          height: 120px;
          width: 600px;
          margin: 0 auto;
          padding: 20px 0;
          cursor: pointer;
        }
        .news .left {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          padding-right: 10px;
        }
        .news .left .title {
          font-size: 20px;
        }
        .news .left .info {
          color: #999999;
        }
        .news .left .info span {
          margin-right: 20px;
        }
        .news .right {
          width: 160px;
          height: 120px;
        }
        .news .right img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      </style>
</head>
<body>
    <div id="app">
        <ul>
          <li class="news" v-for="(item,index) in list" :key="item.id">
            <div class="left">
              <div class="title">{{item.title}}</div>
              <div class="info">
                <span>{{item.source}}</span>
                <span>{{item.time}}</span>
              </div>
            </div>
            <div class="right">
              <img :src="item.img" alt="">
            </div>
          </li>
        </ul>
      </div>
      <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
      <script>
        // 接口地址：http://hmajax.itheima.net/api/news
        // 请求方式：get
        const app = new Vue({
          el: '#app',
          data: {
            list: []
          },
          async created() {
            // 1. 发生请求获取数据
            const res = await axios.get('http://hmajax.itheima.net/api/news')
            // console.log(res)
            // 2. 更新到 list 中，用于页面渲染 v-for
            this.list = res.data.data
            
          },
        })
      </script>
</body>
</html>